@function rem($px) {
  @return $px / 20 + rem
}

.clearfix:after {
  display: block;
  clear: both;
  content: '';
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: rem(50);
  background: #ffffff;
  text-align: center;
  font-size: rem(18);
  line-height: rem(50);
  //box-shadow: 0 1px 25px rgba(0, 0, 0, 0.2);
  .ic {
    font-size: rem(20);
    color: #777777;
    line-height: rem(50);
  }
  #hd_lf {
    float: left;
    margin-left: rem(10);
  }
  #hd_rg {
    float: right;
    margin-right: rem(10);
  }

}

.body {
  background: #f5f5f5;
  height: 100vh;
  overflow: hidden;
  /* padding-bottom: rem(65);
  padding-top: rem(50);*/
}

.body_list {
  padding-top: rem(50);
  li {
    margin-top: rem(15);
    height: rem(50);
    background: #ffffff;
    border-bottom: 2px solid #eaeaea;
    & > span {
      height: rem(50);
      line-height: rem(50);
      padding: 0 rem(8);
      font-size: rem(12);
      color: #303030;
      text-align: center;
      display: block;
      float: left;
    }
    input {
      float: left;
      display: block;

      height: rem(50);
      width: 80%;
      border: 0;
      font-size: rem(12);
      color: #888888;
      padding-left: rem(10);
      border-left: 1px solid #c4c4c4;
    }
    #yz {
      width: 50%;
    }
    & > div {
      float: right;
      width: rem(100);
      height: rem(50);
      font-size: rem(12);
      color: #fff;
      background: #13aeee;
      line-height: rem(50);
      text-align: center;
    }

  }
  .sub {
    background: transparent;
    border: none;
    padding: rem(10) rem(20);
    input[type=submit] {
      display: block;
      width: 100%;
      border: none;
      background: #ff3451;
      text-align: center;
      font-size: rem(16);
      line-height: rem(50);
      color: #ffffff;
      height: rem(50);
      border-radius: 10px;

    }
  }
  .bottom {
    background: transparent;
    border: none;
    padding: 0 rem(10);
    margin-top: 0;
    height: rem(130);
    font-size: 12px;
    color: #303030;
    text-align: center;
    i {
      font-style: normal;
      color: #999;
    }

    #bot_txt {
      width: 100%;
      background: transparent;
      padding-bottom: rem(30);
      border-bottom: 1px solid #c0c0c0;

      span:first-child {
        float: left;
      }
      span:last-child {
        float: right;
      }
    }
    #bot_title {
      font-size: rem(16);
      text-align: center;
      padding: 0 rem(10);
      background: #f5f5f5;
      line-height: rem(18);
      margin-top: - rem(18);
      height: rem(20);
      display: inline-block;
      float: none;
      //margin-top: -rem(8);
    }

    #qq {
      width: rem(36);
      height: rem(36);
      border-radius: 50%;
      margin: rem(10) auto;
      background: #13aeee;
      font-size: rem(20);
      line-height: rem(36);
      text-align: center;
      color: #fff;
      float: none;
      & > i {
        color: #fff;
      }
    }
  }

}

.footer {
  width: 100vw;
  height: rem(65);
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  ul {
    li {
      padding-top: rem(10);
      height: rem(55);
      float: left;
      width: 20%;
      font-size: rem(12);
      text-align: center;
      .icon {
        font-size: rem(35);
        margin: rem(5) 0;
      }

    }
  }
}
